<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform 和 transition</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-image: linear-gradient(red,blue);

            /*过渡*/
            transition: all 1s;

            /*
                旋转中心点
                transform-origin: 50% 50%;
            */
            transform-origin: 200% 200%;
        }

        div:hover{
            /*
                transform: 变化;
            */
            /*
                平移变化: translate();
            */
            transform: translateX(1000px);
            transform: translateY(500px);
            transform: translateX(1000px) translateY(500px);
            transform: translate(1000px 500px);


            /*
                缩放: scale();
            */
            transform: scale(1.5);
            transform: scale(0.8);

            transform: scale(0.8) translateX(1000px) translateY(500px);

            /*
                旋转: rotate(ndeg);
            */

            /*transform: rotate(360deg);*/

            /*transform: scale(0.8) translateX(1000px) translateY(500px) rotate(360deg);*/


            
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>